<template>
  <div class="panels leftpanels">
    <panel-view v-for="panel in leftPanels" :panel="panel">
      <template #content>
        <component :is="panel.component"></component>
      </template>
    </panel-view>
  </div>
  <div class="panels rightpanels">
    <panel-view v-for="panel in rightPanels" :panel="panel">
      <template #content>
        <component :is="panel.component"></component>
      </template>
    </panel-view>
  </div>
</template>

<script setup>
import { ref, defineAsyncComponent, onMounted, watch } from 'vue';

// 引入大屏的头部标题和底部tab栏组件
import PanelView from '@/components/PanelView.vue';

// 动态导入组件
const OperateStatic = defineAsyncComponent(() => import('@/components/panels/OperateStatic.vue'));
const SubwayActivity = defineAsyncComponent(() => import('@/components/panels/SubwayActivity.vue'));
const PassenagerIndicator = defineAsyncComponent(() => import('@/components/panels/PassenagerIndicator.vue'));
const LineOverview = defineAsyncComponent(() => import('@/components/panels/LineOverview.vue'));
const HistoryWarning = defineAsyncComponent(() => import('@/components/panels/HistoryWarning.vue'));
const RealImaging = defineAsyncComponent(() => import('@/components/panels/RealImaging.vue'));

// 定义左右panels的title和对应组件
const leftPanels = [
  {
    title: "运营统计",
    component: OperateStatic
  },
  {
    title: "地铁活动",
    component: SubwayActivity
  },
  {
    title: "客流指标",
    component: PassenagerIndicator
  },
]
const rightPanels = [
  {
    title: "线路概览",
    component: LineOverview
  },
  {
    title: "告警趋势",
    component: HistoryWarning
  },
  {
    title: "实时影像",
    component: RealImaging
  },
]
</script>

<style scoped lang="scss">
.panels {
  position: absolute;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.leftpanels {
  left: 10px;
}

.rightpanels {
  right: 10px;
}
</style>